<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { getSellList } from '@/api/Member/index.js';
import { paymentSetupList } from '@/api/BusinessScope/paymentSetup';
import { GMTToStr } from '@/utils/common.js'
const props = defineProps({
    uuid:{
        default:"",
        type:[String,Number]
    }
})

const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
//日期选择器暂存的时间日期，限制范围使用
const checkDateRange = ref([])

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([
    {
      type: "datePicker",
      prop: ["startDate", "endDate"],
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      label: "",
      model: [],
      editDateValue:(value)=>{
        checkDateRange.value = [];
      },
      changeDateValue:(value)=>{
        checkDateRange.value = value;
      },
      disabledDate:(time)=>{
        let dateRange = checkDateRange.value;
        if((dateRange[0]??'') === ''){
          return false;
        }
        let startTimeValue = new Date(dateRange[0]).getTime();
        let endTimeValue = new Date(dateRange[0]);
        endTimeValue.setFullYear(endTimeValue.getFullYear() + 1);
        endTimeValue = endTimeValue.getTime();
        return time.getTime() < startTimeValue || time.getTime() > endTimeValue;
      }
    },
    {
      type: "input",
      prop: "orderNo",
      placeholder: "销售单号",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "支付方式",
        label: '',
        filterable:true,
        multiple:true,
        prop: 'payType',
        data:[
        ],
        model: [],
    },
    {
        type: "select",
        placeholder: "订单来源",  
        label: '',
        prop: 'orderSource',
        data:[
            {
                label:"全部订单来源",
                value:-1
            },
            {
                label:"零售",
                value:0
            },
            {
                label:"商城",
                value:1
            },
        ],
        model: "",
    },
])

const btnLefts = ref([
])
const btnRights = ref([
])

const tableConfig = ref([

    {
      prop: "orderNo",
      label: "销售单号",
      type:"slot",
      slotName:"orderNo",
      width:150
    },
    {
      prop: "orderSource",
      label: "订单来源",
      width:200,
      format:(value)=>{
        return ["零售","商城"][value]
      }
    },
    {
      prop: "orderState",
      label: "订单状态",
      width:170,
      format:(value,row)=>{
        if(row.orderSource == 0){
          let statusObj = {
            "1":"支付成功",
            "3":"订单完成",
            "5":"订单退单成功",
            "7":"订单退单中",
          }
          return statusObj[value] || "-"
        }else{
          let statusObj = {
            "1":"已支付",
            "3":"已完成",
            "5":"已退款",
          }
          return statusObj[value] || "-"
        }

      }
    },
    {
      prop: "payType",
      label: "支付方式",
      width:150,
      format:(value,row)=>{
        let payData = formInline.value[2].data;
        let str = [];
        console.log(row.payDetailVos,payData,222);
        row.payDetailVos.forEach(lis=>{
          payData.forEach((i)=>{
            if(lis.payWayId == i.value){
              str.push(i.label)
            }
          })
        })
        if(str.length>0){
          return [...new Set(str)].join('、');
        }else{
          return '-'
        }
      }
    },
    {
      prop: "orderAmount",
      label: "应收金额",
      width:250
    },
    {
      prop: "offers",
      label: "优惠金额",
      width:250
    },
    {
      prop: "payAmount",
      label: "实收金额",
      width:250
    },
    {
      prop: "createUser",
      label: "创建人",
      width:100
    },
    {
      prop: "completeTime",
      label: "结算时间",
      width:250
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        let params = {
            ...formInline,
            memberId:props.uuid
        };
        if((params.startDate??'') !== ''){
          params.startDate =params.startDate.split(" ")[0]; 
        }
        if((params.endDate??'') !== ''){
          params.endDate =params.endDate.split(" ")[0]; 
        }
        let result = await getSellList(params);
        totalPage.value = Number(result.total);
        tableData.value = result.records;
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const _paymentSetupList = async ()=>{
  try{
    let params = {
      page: {
          size: 999,
          current: 1
      }
    }
    let result = await paymentSetupList(params);
    formInline.value[2].data = result.map(value=>{
      return {
        label:value.configValue,
        value:value.id
      }
    })
  }catch(e){
    console.log(e);
  }
}
_paymentSetupList();
const _setDefalutDate = ()=>{
  let nowDate = new Date();  
  let startDate = nowDate.valueOf() - 30 * 24 * 3600 * 1000;
  startDate = GMTToStr(startDate);
  let endDate = nowDate;
  endDate = GMTToStr(endDate);
  formInline.value[0].model = [startDate,endDate];;
}
_setDefalutDate();
</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
          :showLine="false"
          :showBtn="false"
        >
            <template #orderNo="{ row }">
                <div class="a-link">{{ row.orderNo }}</div>
            </template>
        </SeachTable>
    </div>
</template>
<style lang="less" scoped>
.a-link{
    color:#3480FF;
    font-size: 14px;
    cursor: pointer;
}
:deep(.search-line){
    padding:0;
}
:deep(.search-table .table){
    padding:0;
}
.text-info{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #222222;
}
</style>